<template>
    <div>
        <div style="text-align: center">
            <span class="weui-btn weui-btn_mini weui-btn_primary"
                  v-text="`设备名:${userInfo['devices'][userInfo['ctl']]['name']}`"></span>
        </div>
        <div id="jp-container" class="jp-container">
            <img style="position:fixed; width: 100%;height: 90vh;opacity: 0.9;top: 0;z-index: -1;"
                 src="http://weixin.pbani.com/wx/static/images/record/background.jpeg">

            <div v-for="data in talk_list">
                <!--<div v-if="0 == data.type">-->
                <div v-if="data.sender == userInfo['openid']" class="talk_recordboxme">
                    <div class="user">我</div>
                    <div class="talk_recordtextbg">&nbsp;</div>
                    <div class="talk_recordtext" @click="play(data)">
                        <div style="margin-top: 5px; margin-bottom: 5px;font-size: 4.4vw;word-break: break-all">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div v-if="0 == data.type">
                                 <span>{{data.content}}</span>
                            </div>
                            <div v-if="1 == data.type">
                                 <span style="transform: rotate(180deg) translate(1vw, 1vw) scale(1.2);" class="glyphicon glyphicon-volume-up"></span>
                            </div>
                            <div v-if="2 == data.type">
                                <span>设备监听:</span>
                                <span style="transform: rotate(180deg) translate(1vw, 1vw) scale(1.2);" class="glyphicon glyphicon-volume-up"></span>
                            </div>
                            <div v-if="3 == data.type">
                                <img @click="showPic(data.content)" style="width:18vw;" :src="data.content" />
                            </div>
                        </div>
                        <span class="talk_time" v-text="dateToDis(data)"></span>
                    </div>
                </div>
                <div v-else class="talk_recordbox">
                    <div class="user" v-text="userInfo['devices'][data.sender]['name']"></div>
                    <div class="talk_recordtextbg">&nbsp;</div>
                    <div class="talk_recordtext" style="float:left;max-width:55vw;" @click="play(data)">
                        <div style="margin-top: 5px; margin-bottom: 5px;font-size: 4.4vw;word-break: break-all">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div v-if="0 == data.type">
                                <span>{{data.content}}</span>
                            </div>
                            <div v-if="1 == data.type">
                                <span style="transform: scale(1.2);" class="glyphicon glyphicon-volume-up"></span>
                            </div>
                            <div v-if="2 == data.type">
                                <span>设备监听:</span>
                                <span style="transform: scale(1.2);" class="glyphicon glyphicon-volume-up"></span>
                            </div>
                             <div v-if="3 == data.type" style="text-align: center;transform: translateY(-3vw)">
                                <img @click="showPic(data.content)" style="width:18vw;" :src="data.content" />
                            </div>
                        </div>
                        <span class="talk_time" v-text="dateToDis(data)"></span>
                    </div>
                </div>

                <div class="cb"></div>
            </div>
        </div>

        <div class="pos_a bot0 w100" style="background: white;">
            <div class="flex record record_1" id="record" style="display: none">
                <label class="weui-label" style="padding-left:2vw;">录音</label>
                <button class="weui-btn weui-btn_mini weui-btn_primary" style="margin:0 0 0 2vw" id="startRecord"
                        @click="start_record">开始</button>
                <button class="weui-btn weui-btn_mini weui-btn_primary" style="margin:0 0 0 2vw" id="deleteVoice"
                        @click="delete_voice">删除</button>
                <button class="weui-btn weui-btn_mini weui-btn_primary" style="margin:0 0 0 2vw" id="uploadVoice"
                        @click="upload_voice">发送</button>
            </div>
            <!--<div class="flex record" style="align-items:center;-->
                <!--justify-content: space-around;display: none;height: 20vh;" id="record">-->
                <!--<img @click="open_voice" style="width: 20vw" src="/wx/static/images/record/get_voice.png" />-->
                <!--<img @click="open_img" style="width: 20vw" src="/wx/static/images/record/get_image.png" />-->
            <!--</div>-->
            <div class="flex send_box" style="height: 10vh;">
                <img @click="toggleRecord" style="width: 10vw" src="http://weixin.pbani.com/wx/static/images/record/voice_btn_icon.png">
                <input style="width:63vw;display: inline-block;margin-left: 2vw" class="form-control" name="text_msg"
                       id="text_msg"
                       type="text"
                       placeholder="请输入文本信息" v-model="text">
                <button class="weui-btn weui-btn_mini weui-btn_primary mar0" id="scan_btn" @click="send_text">
                    确认
                </button>
            </div>
        </div>
        <div class="page gallery" id="gallery" style="display: none">
            <div class="page__hd">
                <h1 class="page__title">Gallery</h1>
                <p class="page__desc">画廊，可实现上传图片的展示或幻灯片播放</p>
            </div>
            <div class="weui-gallery" style="display: block; transform: scale(.96)">
                <span class="weui-gallery__img"
                      style="background-image: url('http://weixin.pbani.com/wx/static/images/view_device/discovery_normal.svg');"></span>
                <div class="weui-gallery__opr" style="padding: 4vw;">
                    <a href="javascript:view_device.gallery_toggle()" class="weui-gallery__del">
                        <i class="weui-icon-clear"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {http, send} from "../../static/js/common";

    export default {
        props: ['userInfo', 'devices', 'socket', 'talk_list', 'debug'],
        data() {
            return {
                record_show_flag: false,
                text: '',
                startRecord: null,
                voice: {
                    localId: '',
                    serverId: ''
                },
                stopClearTimeout: null
            }
        },
        computed: {
            device_type: {
                get(){
                    let sn = this.userInfo.ctl;
                    return this.devices[sn]['type'];
                }
            }
        },
        watch: {
            talk_list(val, oldVal) {
                setTimeout(function(){
                    let ele = document.getElementById("jp-container");
                    ele.scrollTop = ele.scrollHeight;
                }, 100);
            }
        },
        methods: {
            showPic(url){
                wx.previewImage({
                    current: url, // 当前显示图片的http链接
                    urls: [url] // 需要预览的图片http链接列表
                });
            },
            open_voice(){
                $('#record').css('display', 'none')
                $('#record_1').css('display', 'flex')
            },
            open_img(){
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    // sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
                    success: (res)=> {
                        let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        let id = localIds[0];
                        if(id){
                            wx.uploadImage({
                                localId: id, // 需要上传的图片的本地ID，由chooseImage接口获得
                                isShowProgressTips: 1, // 默认为1，显示进度提示
                                success: (res)=> {
                                    http({
                                        url: "tmp_img",
                                        param: {
                                            device_type: this.devices[this.userInfo['ctl']]['type'],
                                            sn: this.devices[this.userInfo['ctl']]['sn'],
                                            server_id: res.serverId,
                                        }
                                    }).then(data => {
                                        if (data.err === 0) {
                                            this.talk_list.push({
                                                type: 3,
                                                content: data.url,
                                                sender: token
                                            })
                                        }
                                    });
                                }
                            });
                        }
                    }
                });
            },
            play(data) {
                if (data.type !== 1 && data.type !== 2) {
                    return;
                }
                let music = new Audio();
                let url = data.content;
                 if (!url.startsWith('http')) {
                    music.src = 'http://' + url.replace(/^\s+|\s+$/gm,'');
                } else {
                    music.src = url;
                }

                music.play();
            },
            upload_voice() {
                if (this.voice.localId === '') {
                    $.alert('请先录制一段声音');
                    return;
                }
                wx.uploadVoice({
                    localId: this.voice.localId,
                    success: (res) => {
                        this.voice.serverId = res.serverId;
                        send('send_voice_msg', {
                            media_id: this.voice.serverId,
                            device_type: this.devices[this.userInfo['ctl']]['type'],
                            sn: this.devices[this.userInfo['ctl']]['sn'],
                            timestamp: Math.round(new Date().getTime()/1000)
                        }).then(data => {
                             // $.alert('发送成功!');
                            this.voice.localId = '';
                            this.startRecord.innerHTML = '开始';
                        });
                    }
                });
            },
            start_record() {
                //开始录音
                console.log(this.startRecord.innerHTML);
                if (this.startRecord.innerHTML.trim() === '开始') {
                    console.log('start record');
                    wx.startRecord({
                        success: () => {
                            this.startRecord.innerHTML = '停止';
                            //30秒后自动停止;
                            this.stopClearTimeout = setTimeout(()=> {
                                wx.stopRecord({
                                    success: (res) => {
                                        this.voice.localId = res.localId;
                                        this.startRecord.innerHTML = '试听';
                                    }
                                });
                            }, 30000);
                        },
                    });
                }

                //结束录音
                if (this.startRecord.innerHTML === '停止') {
                    wx.stopRecord({
                        success: (res) => {
                            clearTimeout(this.stopClearTimeout);
                            this.startRecord.innerHTML = '试听';
                            this.voice.localId = res.localId;
                        },
                        fail: (res) => {
                            alert(JSON.stringify(res));
                        }
                    });
                }

                //试听音频
                if (this.startRecord.innerHTML === '试听') {
                    if (this.voice.localId === '') {
                        alert('请先录制一段声音');
                        return;
                    }
                    wx.playVoice({
                        localId: this.voice.localId
                    });
                }
            },
            delete_voice() {
                this.voice.localId = '';
                this.startRecord.innerHTML = '开始';
            },
            gallery_toggle(url) {
                if (typeof url === 'undefined') {
                    $('#gallery').hide()
                } else {
                    $('#gallery .weui-gallery__img').css(
                        'background-image',
                        'url(' + url + ')'
                    );
                    $('#gallery').show()
                }
            },
            dateToDis(data) {
                let dateToDis;
                if (data.time) {
                    dateToDis = new Date(data.time * 1000);
                } else {
                    dateToDis = new Date();
                }
                return dateToDis.toLocaleTimeString();
            },
            send_text() {
                if (!this.text) {
                    $.alert('请输入文字');
                    return;
                }
                let one_height = $("#jp-container > div").eq(0).height();
                $("#jp-container").animate({scrollTop: (one_height * this.talk_list.length)}, 300);
                send('send_text', {
                    'text_str': this.text,
                    'device_type': this.device_type,
                    'sn': this.userInfo['ctl'],
                    'timestamp': Math.round(new Date().getTime()/1000)
                });
                this.text = '';
            },
            toggleRecord: function () {
                this.record_show_flag = !this.record_show_flag;
                if (this.record_show_flag) {
                    $('#record').css('display', 'flex')
                } else {
                    $('.record').css('display', 'none')
                }
            },
            init() {},
            get_msg_list(sn) {
                http({
                    url: "get_msg_list",
                    param: {
                        'sn': sn
                    }
                }).then(data => {
                    this.$emit(
                        'state',
                        {
                            talk_list: data.list
                        }
                    );
                });
            }
        },
        created() {
            this.get_msg_list(this.userInfo['ctl']);
            console.log('record');
            console.log(this.userInfo);
            console.log(this.devices);
        },
        mounted() {
            this.init();
            this.startRecord = $('#startRecord')[0];
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .send_box {
        justify-content: space-around;
        height: 15vw;
        align-items: center;
        border-top: 1px #ddd solid;
    }

    .record_1 {
        height: 12vh;
        align-items: center;
    }

    .jp-container {
        overflow-y: scroll;
        height: 74.2vh;
        position: relative;
        padding-bottom: 3vh;
    }

    .r_yuyin {
        margin: .1rem 0;
        color: #999999;
        height: .6rem;
        line-height: .6rem;
        padding: 0 .2rem;
        background-color: #fff3ea;
        border: 1px solid #ffe0c9;
        border-radius: 6px;
        max-width: 75%;
        min-width: 18%;
        position: relative;
        float: left;
    }

    .r_yuyin s {
        width: .4rem;
        height: .4rem;
        position: absolute;
        right: .2rem;
        top: .09rem;
        background: url('http://weixin.pbani.com/wx/static/images/icon.png') no-repeat -7.11rem -3.62rem;
        background-size: 14.57rem 4.86rem;
    }

    .deleteicon {
        width: .55rem;
        height: .5rem;
        background: url('http://weixin.pbani.com/wx/static/images/icon.png') no-repeat -6.17rem -3.41rem;
        background-size: 14.57rem 4.86rem;
        margin-top: .12rem;
        margin-left: .1rem;
        float: left;
    }

    /*讨论留言添加表情*/
    .add_face {
        background: url('http://weixin.pbani.com/wx/static/images/add_emoticons.png') no-repeat transparent;
        height: 24px;
        width: 24px;
    }

    /*视频聊天区*/
    .talk {
        height: 480px;
        width: 335px;
        margin: 0 auto;
        /*border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #444;*/
    }

    .talk_title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-indent: 12px;
        font-size: 16px;
        font-weight: bold;
        color: #afafaf;
        /*background:#212121;*/
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #b8d45c;
        font-family: "微软雅黑";
    }

    .talk_title span {
        float: left
    }

    .talk_title_c {
        width: 100%;
        height: 30px;
        line-height: 30px;
    }

    .talk_record {
        width: 100%;
        height: 438px;
        overflow: hidden;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #b8d45c;
        margin: 0px;
        /*background-image: url(../images/graybg.jpg);*/
    }

    .talk_word {
        line-height: 40px;
        height: 40px;
        width: 100%;
        /*background:#212121;*/
    }

    .messages {
        height: 24px;
        width: 240px;
        text-indent: 5px;
        overflow: hidden;
        font-size: 12px;
        line-height: 24px;
        color: #666;
        background-color: #ccc;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }

    .messages:hover {
        background-color: #fff;
    }

    .talk_send {
        width: 50px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        border: 0;
        margin-left: 2px;
        color: #fff;
        background: url('http://weixin.pbani.com/wx/static/images/talk_send_btn.png') no-repeat 0 0 transparent;
        font-family: "微软雅黑";
    }

    .talk_send:hover {
        background-position: 0px -24px;
    }

    .talk_record ul {
        padding-left: 5px;
    }

    .talk_record li {
        line-height: 25px;
    }

    .talk_word .controlbtn a {
        margin: 12px;
    }

    .talk .talk_word .order {
        float: left;
        display: block;
        height: 14px;
        width: 16px;
        background: url("http://weixin.pbani.com/wx/static/images/loop.png") no-repeat 0 0;
    }

    .talk .talk_word .loop {
        float: left;
        display: block;
        height: 14px;
        width: 16px;
        background: url('http://weixin.pbani.com/wx/static/images/loop.png') no-repeat -30px 0;
    }

    .talk .talk_word .single {
        float: left;
        display: block;
        height: 14px;
        width: 16px;
        background: url('http://weixin.pbani.com/wx/static/images/loop.png') no-repeat -60px 0;
    }

    .talk .talk_word .order:hover, .talk .talk_word .active {
        background-position: 0px -20px;
        text-decoration: none;
    }

    .talk .talk_word .loop:hover {
        background-position: -30px -20px;
        text-decoration: none;
    }

    .talk .talk_word .single:hover {
        background-position: -60px -20px;
        text-decoration: none;
    }

    /* * CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */
    .jspContainer {
        overflow: hidden;
        position: relative;
    }

    .jspPane {
        position: absolute;
    }

    .jspVerticalBar {
        position: absolute;
        top: 0;
        right: 0;
        width: 8px;
        height: 100%;
        background-color: transparent;
    }

    .jspHorizontalBar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background-color: transparent;
    }

    .jspVerticalBar *, .jspHorizontalBar * {
        margin: 0;
        padding: 0;
    }

    .jspCap {
        display: none;
    }

    .jspHorizontalBar .jspCap {
        float: left;
    }

    .jspTrack {
        position: relative;
        background-color: transparent;
    }

    .jspDrag {
        background: #ccc;
        position: relative;
        top: 0;
        left: 0;
        cursor: pointer;
        border: 1px solid #333;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
        float: left;
        height: 100%;
    }

    .jspArrow {
        background: #50506d;
        text-indent: -20000px;
        display: block;
        cursor: pointer;
    }

    .jspArrow.jspDisabled {
        cursor: default;
        background: #80808d;
    }

    .jspVerticalBar .jspArrow {
        height: 8px;
    }

    .jspHorizontalBar .jspArrow {
        width: 8px;
        float: left;
        height: 100%;
    }

    .jspVerticalBar .jspArrow:focus {
        outline: none;
    }

    .jspCorner {
        background: #eeeef4;
        float: left;
        height: 100%;
    }

    /* Yuk! CSS Hack for IE6 3 pixel bug :( */
    * html .jspCorner {
        margin: 0 -3px 0 0;
    }

    /*讨论区*/
    .jp-container .talk_recordbox {
        color: #afafaf;
        padding: 2vw 10vw 10vw 0;
    }

    .jp-container .talk_recordbox:first-child {
        border-top: none;
    }

    .jp-container .talk_recordbox:last-child {
        border-bottom: none;
    }

    .jp-container .talk_recordbox .talk_recordtextbg {
        float: left;
        width: 10px;
        height: 30px;
        display: block;
        background: url('http://weixin.pbani.com/wx/static/images/talk_recordtext.png') left top no-repeat;
    }

    .jp-container .talk_recordbox .talk_recordtext {
        border-radius: 14px;
        background-color: #fce0b6;
        height: auto;
        padding: 1vw;
        color: #666;
        font-size: 12px;
        float: right;
        min-width: 34vw;
        word-wrap: break-word;
    }

    .jp-container .talk_recordbox h3 {
        font-size: 14px;
        padding: 2px 0 5px 0;
        text-transform: uppercase;
        font-weight: 100;

    }

    .jp-container .talk_recordbox .user {
        float: left;
        display: inline;
        height: 45px;
        width: 45px;
        margin: 0 2vw 0 0;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        word-break: break-all;
    }

    /*自己发言样式*/
    .jp-container .talk_recordboxme {
        display: block;
        color: #afafaf;
        padding-top: 5px;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 0px;
    }

    .jp-container .talk_recordboxme .talk_recordtextbg {
        float: right;
        width: 10px;
        height: 30px;
        display: block;
        background: url('http://weixin.pbani.com/wx/static/images/talk_recordtextme.png') no-repeat left top;
    }

    .jp-container .talk_recordboxme .talk_recordtext {
        border-radius: 3vw;
        background-color: #fce0b6;
        height: auto;
        padding: 1vw 4vw;
        color: #666;
        font-size: 1vw;
        float: right;
        min-width: 20vw;
        max-width: 55vw;
    }

    .jp-container .talk_recordboxme h3 {
        font-size: 2vw;
        margin: 0;
        /*padding:2px 0 5px 0;*/
        text-transform: uppercase;
        font-weight: 100;
        color: #333333;
        padding: 1vw;

    }

    .jp-container .talk_recordboxme .user {
        float: right;
        padding: 2vw 3vw;
        font-size: 3vw;
        color: black;
    }

    .talk_time {
        color: #666;
        text-align: right;
        /*width: 225px;*/
        display: block;
    }

</style>
